<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=6;IE=7; IE=8; IE=EmulateIE7" />
	<script type="text/javascript" src="./jquery-3.5.1.min.js"></script>
	<style type="text/css">
		body, html {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript">
		function OutCamView () {
			console.info("退出摄像头");
		}

	</script>
</head>

<body>
<div style="height: 100%;width:100%;" id="wrap">
	<div id="app"></div>
</div>
<script src="./imouplayer.js"></script>
</body>
<script>
	function getQueryParam(key) {
		var query = window.location.search.substring(1);
		var vars = query.split("&");
		for (var i=0;i<vars.length;i++) {
			var pair = vars[i].split("=");
			if(pair[0] == key){return pair[1];}
		}
		return(false);
	}

	//进入全屏
	function enterFullScreen(){
		var el = document.documentElement;
		var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
		if(typeof rfs != "undefined" && rfs) {
			rfs.call(el);
		};
		return;
	}

	let player;
	function setupPlayer(url, kitToken) {
		if (player) { player.destroy() }
		player = new ImouPlayer('#app');
		const urlArr = [];
		url.split('%').forEach(function(item, index) {
			const obj = {
				url: item,
				kitToken: kitToken.split('%')[index]
			};
			urlArr.push(obj)
		});
		const width = $('#wrap').clientWidth;
		const height = parseInt(width * 9 / 16);
		const params = {
			src: urlArr,
			width: width,
			height: height,
			autoplay: true,
			controls: false
		};
		player.setup(params);
		// 进入全屏
		player.setFullScreen();

		// 网页全屏
		const fullscreen = getQueryParam('fullscreen')
		if (fullscreen && fullscreen === '1') {
			enterFullScreen();
		}
	}

	window.onload = function() {
		const deviceId = getQueryParam('deviceId')
		const channelId = getQueryParam('channelId')
		console.log(deviceId + "#" + channelId)
		if (!deviceId || !channelId) {
			$('#app').text('参数错误')
			return
		}
		$.ajax({
			method: 'POST',
			contentType: 'application/json;charset=UTF-8',
			url: 'api/startLive',
			data: JSON.stringify({ deviceId: deviceId, channelId: channelId })
		})
		.done(({code, message, data}) => {
			if (code === 200) {
				// const url = 'imou://open.lechange.com/5K0516FPAZ729F0/1/1?streamId=1';
				// const kitToken = 'Kt_cfd831004f824a269f533e970aad0960';
				setupPlayer(data.url, data.kitToken)
			} else {
				$('#app').text(message)
			}
		})
	}
</script>
</html>
